<template>
  <MenuPage
    :data="systemList"
    :columns="systemCol"
    :page.sync="queryParams.pageIndex"
    :size.sync="queryParams.pageSize"
    :total="systemTotal"
    :loading="systemListLoading"
    @queryFun="getNewData">
    <template slot="search">
      <Button type="primary" ghost class="md-add-jh" @click="showModal(null)">创建{{pageBtnTxt}}</Button>
      <Divider type="vertical" style="margin: 10px 0px 10px 10px;" />
      <Input v-model.trim="queryParams.name"  clearable :placeholder="`${pageBtnTxt}名称`" @on-change="changePage(1)" style="width: 180px;margin-left: 15px" />
      <Button class="header-btn" type="primary" ghost style="height: 32px;margin-left: 5px;" @click="refreshSystemList()">
        <i class="el-icon-refresh-right" />
      </Button>
    </template>
    <edit ref="editModal" @ok="handleOk" :title="pageBtnTxt"></edit>
    <Modal
      v-model="modalData.show"
      :title="`${pageBtnTxt}详情`"
      footer-hide
      class="my-modal">
      <div class="item-table">
          <p>
              <span class='label'>供应商名称</span>
              <span>{{ detailInfo.name }}</span>
          </p>
          <p>
              <span class='label'>统—社会信用代码</span>
              <span>{{ detailInfo.code }}</span>
          </p>
          <p>
              <span class='label'>联系人电话</span>
              <span>{{ detailInfo.tel }}</span>
          </p>
          <p>
              <span class='label'>官网</span>
              <span>{{ detailInfo.site }}</span>
          </p>
          <p>
              <span class='label'>邮箱</span>
              <span>{{ detailInfo.email }}</span>
          </p>
          <p>
              <span class='label'>通讯地址</span>
              <span>{{ detailInfo.address }}</span>
          </p>
          <p>
              <span class='label'>税号</span>
              <span>{{ detailInfo.taxCode }}</span>
          </p>
          <p>
              <span class='label'>开发票电话</span>
              <span>{{ detailInfo.mobile }}</span>
          </p>
          <p>
              <span class='label'>开户银行</span>
              <span>{{ detailInfo.depositBank }}</span>
          </p>
          <p>
              <span class='label'>开户银行账户</span>
              <span>{{ detailInfo.bankAccount }}</span>
          </p>
          <p>
              <span class='label'>简介</span>
              <span>{{ detailInfo.intro }}</span>
          </p>
          <p>
              <span class='label'>logo</span>
              <span>
                <img :src="`/Learn${detailInfo.logo}`" style="width: auto; height: 40px; vertical-align: middle;" v-if="detailInfo.logo">
                <span v-else></span>
              </span>
          </p>
      </div>
  </Modal>
    <Modal
      v-model="deployModal"
      title="部署记录查看"
      :footer-hide="true"
      :mask-closable="false"
      :width="800"
    >
      <search-table :columns="systemDeployRecordCol"
               :data="systemDeployRecordList"
               :loading="systemDeployRecordLoading"
               :total="systemDeployRecordTotal"></search-table>
    </Modal>
    <drawers @on-close="getNewData" ref="drawerUrlList" title="配置访问地址列表" :width="1200">
      <url-list :businessSystemId="currentInfo.id" ref="urlList"></url-list>
    </drawers>
    <relativeSystem ref="relativeSystem" @refresh="getNewData" :productId="productInfo.id"></relativeSystem>
  </MenuPage>
</template>
<script>
import {assetServerCol} from "./configData/assetServerCol";
import $ from 'jquery'
import {queryVendor,deleteVendor} from './api/factory'
import encryption from '@/libs/encryption.js'
import * as paramsConfig from '../paramsConfig'
import urlList from './detail/urlList'
import itemUpload from '../components/item-upload/index.vue'
import drawers from '../components/drawers.vue'
import edit from './addFatoryModal.vue'
import relativeSystem from './detail/relativeSystem.vue'
import {
  querySystemList,
  addSystems,
  updateSystem,
  deleteSystem,
  querySystemDeployRecord
} from './api/system.js'
import pageTitle from '@/mixin/pageTitle';
export default {
  components: {itemUpload,drawers,urlList,relativeSystem,edit},
  mixins:[pageTitle],
  data () {
    return {
      productInfo:{},
      currentInfo:{},
      deployModal:false,
      systemDeployRecordList:[],
      systemDeployRecordTotal:0,
      systemDeployRecordLoading:false,
      systemDeployRecordCol:[
        {title:'部件名称',key:'productPartName'},
        {title:'IP资产',key:'ip'},
        {title:'端口',key:'port'},
        {title:'网络区域',key:'assetNetworkMeshName'},
        {title:'网络名称',key:'testNetinfoName'}
      ],

      assetCategoryList:[],
      unitList:[],
      vendorList:[],

      stateOptions:paramsConfig.SYSTEM_STATE_OPTIONS,

      systemList:[],

      institutionList:[],
      industryList:[],
      netMeshList:[],
      netInfoList:[],

      systemListLoading:false,
      systemTotal:0,

      formInline: {
        name: '',
        institutionId:'a',
        status:undefined,
        testNetinfoId:'',
        assetNetworkMeshId:'',
        industry: '',
        objectId: '',
        description: '',
        region:'',
        logo: '',
        longitude:undefined,
        latitude:undefined
      },
      ruleInline: {
        name: [
          { required: true, message: '业务名称不能为空', trigger: 'blur,change' }
        ],
        institutionId: [
          { required: true,  message: '所属单位不能为空', trigger: 'blur,change' }
        ],
        productId: [
          { required: true,  message: '关联产品不能为空', trigger: 'change' }
        ],
        status: [
          { required: true, type:'number',message: '运行状态不能为空', trigger: 'blur,change' }
        ]
      },
      modalData: {
        show: false,
        loading: false
      },
      isAdd: false,
      upgradeType: 'add',
      typeOptions: ['软件', '硬件'],
      isUpgrade: false,
      file: {},
      optionList: [],
      modalData: {
        show: false
      },
      detailInfo: {},
      queryParams:{
        pageIndex:1,
        pageSize:10
      },
      // 用户信息
      USER_ID: '',
      isRootDesinger: '',
      distributed: false,
      // 页面设置
      fullHeight: document.documentElement.clientHeight,
      fullWidth: document.documentElement.clientWidth,
      setTableHei: 'auto',
      showDefImg: false,
      showImgList: false,
      // 镜像列表
      assetListLoading: false,
      assetCategory: [],
      unit: '',
      industry: '',
      systemCol:[],
      actionButtons: [
        {
          txt: '详情',
          fun: (obj) => {
            this.modalData.show = true
            this.detailInfo = obj
          }
        },
        {
          txt: '修改',
          fun:(obj)=>{
            this.showModal(obj)
          },
        },
        {
          txt: '删除',
          tooltip: true,
          type: 'delete',
          title: '确定要删除吗？',
          fun:this.delItem
        }
      ],
      searchImageName: '',
      assetModelInput: '',
      creatByMeModal: false,
      // 创建和修改镜像
      imageID: '',
      assetModal: false,
      updateUrl: `/api/resource-manager/image/add`,
      addAssetBtnLoading: false,
      productTypeIds:[],



      setDisabled: false,
      isCreate: true,
      //profile
      profileList: [],
      // 镜像用户
      showImgUser: false,
      formIsShow: false,
      imageUserId: '',
      addUserLoading: false,
      createPort: '22',
      isCreatUser: false,
      isClound: false,
      imgUserList: [],
      flag: 0, //标记成功的次数
      filedArr: [],//承装切片的容器
      oldTime: 0,//初始化时间
      progressflag: false,//控制进度条的展示
      fileName: '',
      saveTargetStatusArr: [],//存储中间状态
      messageSwitch: false,//解决鼠标移入失败或者成功验证状态气泡框位置错乱设置的开关
      systemVersion:[]
    }
  },
  computed: {
    showProductName(){
      return ``
    }
  },
  watch: {


  },
  created () {
    // 获取用户id
    let November = sessionStorage.getItem('November')
    November = JSON.parse(encryption.SelfUseDecrypt(November))
    this.USER_ID = November.userId
    this.isRootDesinger = November.isRootDesinger
    this.distributed = November.distributed
    // this.distributedRange = this.$store.state.user.distributedRange
  },
  mounted () {
    this.systemCol = assetServerCol(this);
    let getPage = this.$route.query.page ? parseInt(this.$route.query.page) : 1
    this.queryParams.pageIndex = getPage
    this.getNewData()
  },
  methods: {
    handleOk(type){
      if(type === 'add'){
        this.queryParams.pageIndex = 1;
      }
      this.getNewData()
    },
    getNewData(){
      queryVendor(this.queryParams).then(res=>{
        if(res.code==1){
          this.systemList = res.data.items;
          this.systemTotal = res.data.total;
        }else{
          this.$Message.error(res.message)
        }
        
      }).finally(()=>{
        
      })
    },
    changePage(page){
      this.queryParams.pageIndex = page;
      this.getNewData();
    },
    delItem(params){
      deleteVendor(params.id).then(res=>{
        if(res.code==1){
          this.$Message.info('删除成功!');
           // 删除后展示当前页，当前页没有数据展示前一页
           let page = (this.systemList.length == 1 && this.queryParams.pageIndex > 1) ?
           this.queryParams.pageIndex - 1 : this.queryParams.pageIndex;
           this.$set(this.queryParams,'pageIndex',page);
          this.getNewData()
        }else{
          this.$Message.error(res.message);
        }
      })
    },
    refreshSystemList(){
      this.queryParams = {
        pageIndex:1,
        pageSize:10,
      }
      this.getNewData()
    },
    // 下载文件
    downloadFile(item) {
      if (!item.fileId) {
        return
      }
      let a = document.createElement('a');
      let fileName = item.fileName; //filename名称截取
      a.href = `/api/minio/download/${item.fileId}`;
      a.download = fileName; //命名下载名称
      a.click(); //点击触发下载
    },
    // 打开模态框
    showModal(data) {
      this.$refs.editModal.openModal(data)
    }
  },
  beforeDestroy () {

  }
}
</script>
<style scoped>
.my-form-item /deep/ .ivu-form-item-content{
  display: flex;
}
 .item-table {
   display: table;
   width: 100%;
   border: 1px solid var(--table-border);
   table-layout: fixed;
   word-break: break-all;
 }
.item-table p {
  display: table-row;
  line-height: 36px;
  text-align: center;
}
.item-table p span {
  display: table-cell;
  border-bottom: 1px solid var(--table-border);
}
.ios-alert {
  /* position: absolute;
        top: -44px;
        right: -404px; */
  color: orange;
  font-size: 16px;
  cursor: pointer;
}
.too {
  position: absolute;
  left: 113px;
  top: -1px;
}
</style>


